<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home/index/index' }"
          >首页</el-breadcrumb-item
        >
        <el-breadcrumb-item :to="{ path: '/emigrated' }"
          >关卡管理</el-breadcrumb-item
        >
        <el-breadcrumb-item
          ><a href="/emigrated/dateliEmigrated">关卡详情</a></el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>
    <!-- 查看关卡 -->
    <div v-if="IsChack == 0" class="describe">
      <el-descriptions class="margin-top" title="关卡详情" :column="3" border>
        <template #extra>
          <el-button @click="Eupdate" type="primary">修改</el-button>
        </template>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">关卡名</div>
          </template>
          {{ Ename }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">关卡类型</div>
          </template>
          {{ ELable }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">关卡数量</div>
          </template>
          {{ ECount }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">关卡题目数量(关卡平均题目数)</div>
          </template>
          {{ EquestionCount }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">通关条件(百分比用0.1代替)</div>
          </template>
          {{ Econdition }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">通关时间(分钟)</div>
          </template>
          {{ Etime }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">关卡难度(关卡最大难度)</div>
          </template>
          {{ Elv }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">关卡海报</div>
          </template>
          <img style="width: 10%" src="@/assets/关卡.png" />
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <!-- 查看关卡 -->
    <!-- 修改关卡 -->
    <div v-if="IsChack == 1" class="describe">
      <el-descriptions class="margin-top" title="关卡详情" :column="3" border>
        <template #extra>
          <el-button @click="Esave" type="primary">保存</el-button>
        </template>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">关卡名</div>
          </template>
          <el-input v-model="Ename" placeholder="关卡名" />
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">关卡类型</div>
          </template>
          <el-select v-model="ELable" placeholder="关卡类型">
            <el-option label=".NET" value="shanghai" />
            <el-option label="JAVA" value="beijing" />
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">关卡数量</div>
          </template>
          <el-input-number disabled v-model="ECount" :min="1" :max="10000" />
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">关卡题目数量(关卡平均题目数)</div>
          </template>
          <el-input-number
            disabled
            v-model="EquestionCount"
            :min="1"
            :max="10000"
          />
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">通关条件(百分比用0.1代替)</div>
          </template>
          <el-input-number v-model="Econdition" :step="0.1" :min="0" :max="1" />
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">通关时间(分钟)</div>
          </template>
          <el-input v-model="Etime" placeholder="通关时间" />
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">关卡难度(关卡最大难度)</div>
          </template>
          <el-input-number disabled v-model="Elv" :min="1" :max="10" />
        </el-descriptions-item>

        <el-descriptions-item>
          <template #label>
            <div class="cell-item">关卡海报</div>
          </template>
          <el-upload
            class="avatar-uploader"
            :on-change="handlePreview"
            acton="#"
          >
            <img v-if="imageUrl != ''" :src="imageUrl" style="width: 10%" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
          <!-- <el-upload
            action="http://localhost:5175/api/Files/MyFile"
            list-type="picture-card"
          >
            <el-icon><Plus /></el-icon>
          </el-upload> -->
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <!-- 修改关卡 -->
    <div class="chilren">
      <div style="padding: 10px">
        <strong>关卡子集</strong>
      </div>
      <div class="add">
        <el-button type="primary" @click="addBarrierChilrens"
          >添加子集关卡</el-button
        >
      </div>
      <!-- 添加子集抽屉 -->
      <el-drawer v-model="drawer" direction="rtl" size="30%">
        <strong style="font-size: 25px">添加子集</strong>
        <div class="describe">
          <el-descriptions class="margin-top" :column="1" border>
            <template #extra>
              <el-button @click="Esave" type="primary">保存</el-button>
            </template>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">关卡名</div>
              </template>
              <el-input v-model="Name" placeholder="关卡名" />
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">关卡层数</div>
              </template>
              <el-input-number disabled v-model="Count" :min="1" :max="10000" />
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">关卡题目数量(关卡平均题目数)</div>
              </template>
              <el-input-number
                disabled
                v-model="questionCount"
                :min="1"
                :max="10000"
              />
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">通关条件(百分比用0.1代替)</div>
              </template>
              <el-input-number
                v-model="condition"
                :step="0.1"
                :min="0"
                :max="1"
              />
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">通关时间(分钟)</div>
              </template>
              <el-input v-model="time" placeholder="通关时间" />
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">关卡难度(不可超过最大难度)</div>
              </template>
              <el-input-number v-model="lv" :min="1" :max="10" />
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </el-drawer>

      <!-- 添加子集抽屉 -->
      <div class="operate">
        <el-table class="table" border :data="tableData">
          <el-table-column prop="Ename" label="关卡名" width="180" />
          <el-table-column prop="Eexplain" label="描述" width="180" />
          <el-table-column label="关卡试题数" width="180">
            <template #default="scope">
              <el-tag>{{ scope.row.EquestionCount }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="关卡层级" width="180">
            <template #default="scope">
              <el-tag>{{ scope.row.EemigratedCount }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="关卡等级" width="180">
            <template #default="scope">
              <el-tag>{{ scope.row.Elv }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="发布" width="120">
            <template #default="scope">
              <el-tag
                :type="scope.row.EIsPublish === 0 ? 'warning' : 'success'"
                disable-transitions
                >{{ scope.row.EIsPublish === 0 ? "否" : "是" }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column label="禁用" width="120">
            <template #default="scope">
              <el-tag
                :type="scope.row.EIsBan === 0 ? 'success' : 'warning'"
                disable-transitions
              >
                {{ scope.row.EIsBan === 0 ? "否" : "是" }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="180">
            <template #default="scope">
              <el-button
                plain
                type="primary"
                @click="dateliBarrierChilrens(scope)"
                size="small"
              >
                详情
              </el-button>
              <el-button
                plain
                v-if="scope.row.EIsPublish === 1"
                :type="scope.row.EIsBan === 0 ? 'danger' : 'warning'"
                @click="IsBan(scope)"
                size="small"
              >
                {{ scope.row.EIsBan === 0 ? "禁用" : "启用" }}
              </el-button>
              <el-button
                plain
                v-if="scope.row.EIsPublish === 0"
                :type="scope.row.EIsPublish === 0 ? 'success' : 'info'"
                @click="IsPublish(scope)"
                size="small"
              >
                {{ scope.row.EIsPublish === 0 ? "发布" : "取消" }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="paging">
          <el-pagination background layout="prev, pager, next" :total="1000" />
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";
import { DateliEmigrated } from "@/utils/Exam/emigrted/dateliemigrated";
import router from "@/router";
import { ElMessage } from "element-plus";

export default defineComponent({
  setup() {
    const data = reactive<DateliEmigrated>({
      tableData: [
        {
          Ename: "XXX关卡",
          Eexplain: "XXXXXX",
          EquestionCount: 20,
          EemigratedCount: 1,
          Elv: 3,
          EIsPublish: 0,
          EIsBan: 0,
        },
        {
          Ename: "XXX关卡",
          Eexplain: "XXXXXX",
          EquestionCount: 20,
          EemigratedCount: 1,
          Elv: 3,
          EIsPublish: 0,
          EIsBan: 0,
        },
        {
          Ename: "XXX关卡",
          Eexplain: "XXXXXX",
          EquestionCount: 20,
          EemigratedCount: 1,
          Elv: 3,
          EIsPublish: 1,
          EIsBan: 0,
        },
        {
          Ename: "XXX关卡",
          Eexplain: "XXXXXX",
          EquestionCount: 20,
          EemigratedCount: 1,
          Elv: 3,
          EIsPublish: 1,
          EIsBan: 1,
        },
      ],
      name: "",
      condition: 0.0,
      time: "",
      imageUrl: "@/assets/关卡.png",
      lv: 0,
      ELable: ".NET",
      questionCount: 20,
      Count: 5,
      Ename: "XXX关卡",
      ECount: 10,
      EquestionCount: 20,
      Econdition: 0.6,
      Etime: "30",
      Elv: 3,
      IsChack: 0,
      drawer: false,
    });
    const methods = {
      handlePreview(file: any) {
        let fd = new FormData();
        fd.append("file", file.raw);
        data.imageUrl = URL.createObjectURL(file.raw);
        console.log(data.imageUrl, "===");
      },
      Eupdate() {
        data.IsChack = 1;
      },
      Esave() {
        ElMessage.success("修改成功");
        router.push("/emigrated");
      },
      //禁用
      IsBan(val: any) {
        if (val.row.EIsBan === 1) {
          val.row.EIsBan = 0;
        } else {
          val.row.EIsBan = 1;
        }
      },
      //发布
      IsPublish(val: any) {
        if (val.row.EIsPublish === 1) {
          val.row.EIsPublish = 0;
        } else {
          val.row.EIsPublish = 1;
        }
      },
      //添加关卡子集
      addBarrierChilrens() {
        data.drawer = true;
      },
      //关卡子集详情
      dateliBarrierChilrens(val: any) {
        router.push("/emigrated/dateliEmigratedChilrens/" + val.row.Ename);
      },
    };
    return {
      ...toRefs(data),
      ...methods,
    };
  },
});
</script>
<style scoped>
.crumbs {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 20px;
  margin: 15px;
  background-color: white;
  width: 94%;
}
.describe {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 20px;
  margin: 15px;
  background-color: white;
  width: 94%;
}
.chilren {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  padding: 20px;
  margin: 15px;
  background-color: white;
  width: 94%;
}
.add {
  float: right;
  margin: 10px;
}
</style>
